<template>
    <div class="background">
        <div class="first">
            <div class="bin1" id="bin1"></div>
            <el-divider direction="vertical"></el-divider>
        </div>
        <div class="second">
            <div class="bin2" id="bin2"></div>
            <el-divider direction="vertical"></el-divider>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { listOrder } from "@/api/order/order.js";
import { ref } from "vue";
import { listCategory } from "@/api/category/category.js";

export default {
    name: 'BorrowDetails',
    setup() {
        const orders = ref([]);
        const categories = ref([]);

        // 获取借阅订单
        const getListOrder = async () => {
            try {
                const res = await listOrder();
                if (res.code === 200) {
                    orders.value = res.rows; // 获取 rows 数据
                    updateCharts(); // 更新图表
                } else {
                    console.error(res.msg); // 处理错误消息
                }
            } catch (error) {
                console.error("获取数据失败:", error);
            }
        };

        // 获取图书类别
        const getListCategory = async () => {
            try {
                const res = await listCategory();
                if (res.code === 200) {
                    categories.value = res.rows; // 获取 rows 数据
                    updateCharts(); // 更新图表
                } else {
                    console.error(res.msg); // 处理错误消息
                }
            } catch (error) {
                console.error("获取数据失败:", error);
            }
        };

        // 更新图表的函数
        const updateCharts = () => {
            if (orders.value.length > 0 && categories.value.length > 0) {
                updatePieChart(orders.value, categories.value);
                updateLineChart(orders.value);
            }
        };

        // 更新饼图
        const updatePieChart = (orders, categories) => {
            const bin1 = echarts.init(document.getElementById('bin1'));

            // 统计每个类别的借阅数量
            const categoryCount = {};
            orders.forEach(order => {
                const categoryId = order.categoryId; // 假设每个订单都有 categoryId
                if (categoryId) {
                    categoryCount[categoryId] = (categoryCount[categoryId] || 0) + 1;
                }
            });

            // 准备饼图数据
            const pieData = categories.map(category => ({
                value: categoryCount[category.categoryId] || 0, // 借阅数量
                name: category.categoryName // 类别名称
            }));

            const option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '84px',
                    left: 'right',
                    height: '183px',
                    width: '183px',
                    orient: 'vertical'
                },
                series: [
                    {
                        name: '借阅情况',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: pieData // 更新饼图数据
                    }
                ]
            };
            bin1.setOption(option);
        };

        // 更新折线图
        // const updateLineChart = (orders) => {
        //     const bin2 = echarts.init(document.getElementById('bin2'));
        //     const sortedOrders = orders.sort((a, b) => new Date(a.orderTime) - new Date(b.orderTime));//使用 new Date(a.orderTime) 和 new Date(b.orderTime) 来确保比较的是日期对象，而不是字符串
        //
        //     const lineData = sortedOrders.map(order => order.orderIsout); // 使用 orderIsout 作为 y 轴数据
        //     const xAxisData = sortedOrders.map(order => order.orderTime); // 使用 orderTime 作为 x 轴数据
        //     const option2 = {
        //         xAxis: {
        //             type: 'category',
        //             name: '借阅时间',
        //             data: xAxisData // 使用从后端获取的 orderTime 作为 x 轴数据
        //         },
        //         yAxis: {
        //             name: '借阅数量',
        //             type: 'value'
        //         },
        //         series: [{
        //             data: lineData, // 使用从后端获取的 orderIsout 数据
        //             type: 'line'
        //         }]
        //     };
        //     bin2.setOption(option2);
        // };

        // 更新折线图
        const updateLineChart = (orders) => {
            const bin2 = echarts.init(document.getElementById('bin2'));

            // 首先，确保订单数据按时间排序
            const sortedOrders = orders.sort((a, b) => new Date(a.orderTime) - new Date(b.orderTime));

            // 按月份统计借阅数量
            const monthCount = {};
            sortedOrders.forEach(order => {
                const date = new Date(order.orderTime);
                const month = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`; // 月份从0开始，所以需要+1
                if (month in monthCount) {
                    monthCount[month]++;
                } else {
                    monthCount[month] = 1;
                }
            });

            // 准备x轴和y轴的数据
            const xAxisData = Object.keys(monthCount).sort(); // 月份
            const lineData = xAxisData.map(month => monthCount[month]); // 对应的借阅数量

            const option2 = {
                xAxis: {
                    type: 'category',
                    name: '借阅时间',
                    data: xAxisData // 使用月份作为 x 轴数据
                },
                yAxis: {
                    name: '借阅数量',
                    type: 'value'
                },
                series: [{
                    data: lineData, // 使用按月份统计的借阅数量数据
                    type: 'line'
                }]
            };
            bin2.setOption(option2);
        };

        return {
            getListOrder,
            getListCategory
        };
    },
    mounted() {
        this.getListOrder(); // 在组件挂载时获取借阅订单
        this.getListCategory(); // 获取图书类别
    }
}
</script>

<style scoped>
.background{
    width: 1664px;
    height: 1020px;
    background: #f5f5f5;
}
.first{
    margin-top: 30px;
    margin-left: 16px;
    margin-right: 16px;
    height: 337px;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
    position: relative;
}
.second{
    margin-top: 16px;
    margin-left: 16px;
    margin-right: 16px;
    width: 1632px;
    height: 590px;
    border-radius: 6px;
    background: #fff;
}
.title{
    margin-top: 23px;
    margin-left: 16px;
}
.title1{
    color: #808080;
    font-size: 16px;
    font-face: Source Han Sans CN;
    font-weight: 700;
    letter-spacing: 0;
}
.title2{
    color: #1a1a1a;
    font-size: 16px;
    font-face: Source Han Sans CN;
    font-weight: 700;
    letter-spacing: 0;
}
.bin1{
    width: 1000px;
    height: 380px;
    position: absolute;
    left: 200px;
}
.bin2{
    width: 1200px;
    height: 450px;
    background: white;
    position: absolute;
    margin-top: 0;
    left: 100px;
}
</style>
